<!--
 * @Author: zh
 * @Date: 2024-12-04 10:29:44
 * @LastEditors: zh
 * @LastEditTime: 2024-12-04 10:54:42
 * @Description: 
-->
<!DOCTYPE html>
<html style="height: 100%">

<head>
    <meta charset="utf-8">
    <script src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>
</head>

<body style="height: 100%; margin: 0">
    <div id="main" style="height: 100%"></div>
    <script type="text/javascript">
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);

        var option = {
            title: {
                text: '现场物资风险预警情况'
            },
            tooltip: {},
            legend: {
                data: ['库存风险', '质量风险', '采购风险']
            },
            xAxis: {
                type: 'category',
                data: ['导体材料', '绝缘材料', '支撑结构材料', '保护材料', '其他材料']
            },
            yAxis: {
                type: 'value',
                min: 0,
                max: 300,
                interval: 100,
                splitArea: {
                    interval: "auto",
                    show: true,
                    areaStyle: {
                        color: ['#e3f8ec', '#f9d9b5', '#f3d3d3'] // 高风险, 中风险, 低风险背景色

                    }
                },
                splitLine: {
                    show: true
                },
                axisLabel: {
                    show: false
                }
            },
            graphic: [
                {
                    type: 'text',
                    left: '5%',
                    bottom: '25%',
                    z: 100,
                    style: {
                        text: '低风险',
                        fontSize: 24,
                        fill: '#4bd181'
                    }
                },
                {
                    type: 'text',
                    left: '5%',
                    bottom: '50%',
                    z: 100,
                    style: {
                        text: '中风险',
                        fontSize: 24,
                        fill: '#ff952a'
                    }
                },
                {
                    type: 'text',
                    left: '5%',
                    bottom: '75%',
                    z: 100,
                    style: {
                        text: '高风险',
                        fontSize: 24,
                        fill: '#d74242'
                    }
                }
            ],
            series: [
                {
                    name: '库存风险',
                    type: 'bar',
                    data: [120, 200, 150, 80, 70],
                    itemStyle: {
                        color: '#4b87d6'
                    }
                },
                {
                    name: '质量风险',
                    type: 'bar',
                    data: [200, 240, 210, 130, 90],
                    itemStyle: {
                        color: '#79d47b'
                    }
                },
                {
                    name: '采购风险',
                    type: 'bar',
                    data: [150, 190, 170, 100, 60],
                    itemStyle: {
                        color: '#f38f3d'
                    }
                }
            ]
        };
        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }
    </script>
</body>

</html>